<template>
  <!-- <v-scale-screen width="1920" height="1680" :boxStyle="boxStyle"> -->
  <div class="bgc">
    <div class="main">
      <!-- <div class="quan" @click="toggleFullScreen()">
          <i class="el-icon-full-screen"></i>
        </div> -->
      <div class="search">
        <el-row :gutter="20">
          <!-- <el-col :span="8"> </el-col> -->
          <el-col :span="24">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="" prop="hosp">
                <el-select v-model="queryParams. hospitalCode" filterable placeholder="请选择医院" >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="" prop="title">
                <el-select v-model="queryParams.titleId" @change="titleHandle" placeholder="请选择问卷">
                  <el-option v-for="item in titleeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="form.title" placeholder="请输入问卷名称" source/> -->
              </el-form-item>

              <el-form-item label="" prop="labelName">
                <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="getTime()">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" v-if="false" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>

        </el-row>
      </div>
      <div class="line_chart">
        <zhu :datas="datas"></zhu>
      </div>

    </div>
  </div>
  <!-- </v-scale-screen> -->
</template>

<script>
// import leftOne from "./PieChart.vue";
// import rightOne from "./zhexian.vue";
// import leftTwo from "./pietwo.vue";
// import rightTwo from "./linetwo.vue";
import zhu from "./zhu.vue";
import moment from "moment"
import { hosList, indexCharts } from '@/api/hcem/title'

export default {
  components: {
    zhu
  },
  data() {
    return {
      datas: [], // 图表数据
      options: [],//医院列表选项
      chartColumn: null,
      zhe: null,
      bing: null,
      zhu: null,
      nowDate: "",
      active: "",
      boxStyle: {
        backgroundColor: "#ffffff"
        // backgroundColor: " #030a89"
      },
      timeText: "", // 时间显示
      timer: null, // 定时器(时间显示的)
      queryParams: {
        titleId: null,
         hospitalCode: null,
           startCycle: '',
          endCycle: ''
      },
      topFour: {
        divide: '',
        pending: '',
        selectGross: '',
        synthesisScore: ''
      },
      topRangle: {
        countThan: 0,  //待处理环比
        pageThan: 0,  //答卷总量环比
        pendingThan: 0, //	提交转化率环比
        scoreThan: 0  //满意度环比
      },
      titleeOptions: [], //答卷
      times: [],
      titleChange: '',
    };
  },
  components: {
   zhu
  },
  methods: {
    titleHandle(selectValue) {
      let title = this.titleeOptions.find(v => v.value == selectValue)
      if (title) {
        //console.log(title,'sdf');
        this.titleChange = title.label
      }
      // console.log(e);
    },
    getdateon() {
      var date = new Date();

      // 获取当前月份
      var nowMonth = date.getMonth() + 1;

      // 获取当前是几号
      var strDate = date.getDate();

      // 添加分隔符“-”
      var seperator = "-";

      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }

      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      this.nowDate =
        date.getFullYear() + "年" + nowMonth + "月" + strDate + "日";
    },
    toggleFullScreen() {
      // 检查当前是否处于全屏模式
      if (this.$fullscreen.isFullscreen) {
        this.active = "2";

        this.$fullscreen.exit();
      } else {
        this.$fullscreen.request();
        this.active = "1";
      }
      // 或者直接调用 toggle() 方法
      // toggle()方法会自动检测当前是否处于全屏状态，如果是，则退出全屏，如果不是，则进入全屏
      // this.$fullscreen.toggle();
    },
    timeStart() {
      // 设置定时器
      this.timer = setInterval(() => {
        this.timeText = this.formatDate(new Date());
      }, 1000);
    },
    async getHosList() {
      let res = await hosList()
      let data = res.data
      data.forEach(v => {
        this.options.push({
          value: v.hospital_code,
          label: v.hospital_name
        })
      })
    },
    async getTitleList() {
      this.titleeOptions = [
        {value: 1, label: '诊前导医体验评价'},
        {value: 2, label: '诊中就医体验评价'},
        {value: 3, label: '诊后随访体验评价'},
      ]
    },
    getTime() {
      const threeMonthsAgo = moment().subtract(3, 'months');
      this.queryParams.  startCycle = threeMonthsAgo.format('YYYY-MM-DD') //开始时间
      this.queryParams.endCycle = moment().format('YYYY-MM-DD'); //结束时间
      this.times = [this.queryParams.  startCycle,this.queryParams.endCycle]

     // this.handleQuery()
    },
    async handleQuery() {
      if (this.queryParams.titleId == null || this.queryParams. hospitalCode == null) {
        this.$message.error('请选择医院和问卷');
        return
      }
      if (this.times.length == 0) {
        this.$message.error('请选择时间');
        return
      }
    this.getMyData()

    },
    async getMyData(){
      let res = await indexCharts(this.queryParams)
      if(res.code == 200){
        this.datas = res.data
      }
      //console.log(res);
      
    },
    resetQuery() {
      this.queryParams.  startCycle = ''
      this.queryParams.endCycle = ''
      this.queryParams.titleId = null
      this.queryParams.hospitalCode = ''
      this.times = []
    },
    async init() {
      if (this.options.length > 0) {
        this.queryParams. hospitalCode = this.options[0].value
        await this.getTitleList()
        if (this.titleeOptions.length > 0) {
          this.queryParams.titleId = this.titleeOptions[0].value
          this.getTime()
          this.handleQuery()
        }
      } else {
        this.$message.error('获取医院失败')
      }
    }
  },
  computed: {

  },
  async created() {
    // document.body.style.overflow = "auto";
   // this.timeText = this.formatDate(new Date());
    // this.getdateon();
    await this.getHosList()
    await this.init()
  },
  destroyed() {
    //clearInterval(this.timerr);
  },
  mounted: function () {
    //this.timeStart();
  }
};
</script>
<style>
body {
  /* overflow: auto; */
}
</style>
<style lang="scss" scoped>
.el-icon-full-screen {
  color: #000;
}

.bgc {
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  // height: 100%;
  position: relative;
  padding-bottom: 200px;

  .main {
    width: 95%;
    margin: 0 auto;
    margin-top: 40px;

    .search {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .line_chart {}
  }

}
</style>
